﻿<div id="menus" class="dropdown-menu" tabindex="1">
    <span><i class="icon-tags icon-large"></i>@Resources.LinkTitle</span>
    <ul class="dropdown">
        <li>@Html.NavigationLink(Resources.Book, "HomeList", "Book", new { }, new { @id = "books", @i = "icon-book icon-large" })</li>
        <li>@Html.NavigationLink(Resources.Note, "HomeList", "Note", new { }, new { @id = "notes", @i = "icon-list-alt icon-large" })</li>
        <li>@Html.NavigationLink(Resources.Music, "HomeList", "Album", new { }, new { @id = "music", @i = "icon-music icon-large" })</li>
        @if (!Request.IsAuthenticated && Request.RequestContext.RouteData.Values["controller"].ToString() != "Account")
        {
            <li>@Html.NavigationLink(Resources.SignIn, "LogOn", "Account", new { }, new { @id = "login", @i = "icon-signin icon-large", @modalWidth = "470px", @modalHeight = "510px" })</li>
        }
        else
        {
            <li>@Html.NavigationLink(Resources.AdminSetting, "Home", "Main", new { area = "Admin" }, new { @i = "icon-cogs icon-large" })</li>
            @Html.Partial("SubNavigation")
        }
    </ul>
</div>
<script type="text/javascript">
    function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
    }
    DropDown.prototype = {
        initEvents: function () {
            var obj = this;

            obj.dd.on('click', function (event) {
                $(this).toggleClass('active');
                return false;
            });

            obj.opts.on('click', function () {
                var opt = $(this);
                var link = $(this).children('a');

                if (!link.attr('modalWidth') && !link.attr('modalHeight')) {
                    window.document.location.href = link[0].href;
                }
                else {
                    $.colorbox({ href: link[0].href, iframe: true, width: link.attr('modalWidth'), height: link.attr('modalHeight') });
                }
            });
        },
        getValue: function () {
            return this.val;
        },
        getIndex: function () {
            return this.index;
        }
    }

    function initDropDownMenu() {
        var dd = new DropDown($('#menus'));

        $(document).click(function () {
            $('.dropdown-menu').removeClass('active');
        });
    }

    Sys.require(["jQuery"], function () { initDropDownMenu(); });
</script>
